<template>
  <div>
    <el-form :model="formData" ref="form" label-position="left">
      <el-table
        :data="formData.sysAutocodeItems"
        style="width: 100%;"
        class="sort-table mg-top20"
        v-bind="$attrs"
        row-key="id"
        v-on="$listeners"
        @cell-mouse-enter="
          row => {
            row.hover = true;
          }
        "
        @cell-mouse-leave="
          row => {
            row.hover = false;
          }
        "
      >
        <el-table-column width="24">
          <template scope="scope">
            <i v-show="scope.row.sort" class="iconfont icontuozhuai"></i>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" class="cup" label="列名" prop="columnName" width="150"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" class="cup" label="说明" prop="columnComment" width="200">
           <template slot-scope="scope">
          <el-form-item label=" "  >
            <el-input v-model="scope.row.columnComment" >

            </el-input>
          </el-form-item>
           </template>

        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" class="cup" label="表单显示" width="120">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.needEdit" :true-label="'1'" :false-label="'0'"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column class="cup" label="控件类型" min-width="150">
          <template slot-scope="scope">
            <el-form-item label=" " :prop="'sysAutocodeItems.' + scope.$index + '.controlType'" :rules="{ required: scope.row.needEdit === '1', message: '', trigger: 'blur' }">
              <el-select v-model="scope.row.controlType" filterable>
                <el-option label="单行文本" value="input"></el-option>
                <el-option label="多行文本" value="textarea"></el-option>
                <el-option label="下拉" value="select"></el-option>
                <el-option label="日期" value="date"></el-option>
                <el-option label="数字" value="numer"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column class="cup" label="数据来源" min-width="150">
          <template slot-scope="scope">
            <el-form-item label=" " :prop="'sysAutocodeItems.' + scope.$index + '.controlDatasourseType'" :rules="{ required: scope.row.controlType === 'select', message: '', trigger: 'blur' }">
              <el-select v-model="scope.row.controlDatasourseType" filterable>
                <el-option label="数据字典" value="1"></el-option>
                <el-option label="数据接口" value="2"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" class="cup" label="值" min-width="150">
          <template slot-scope="scope">
            <el-form-item label=" " :prop="'sysAutocodeItems.' + scope.$index + '.controlDatasourse'" :rules="{ required: scope.row.controlType === 'select', message: '', trigger: 'blur' }">

            <el-select v-model="scope.row.controlDatasourse" filterable>

              <el-option v-if="scope.row.controlDatasourseType==='1'"  v-for="i in dictList" :label="i.name" :value="i.code"></el-option>

            </el-select>
             </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <span class="beforeBtn" @click="last">上一步</span>
      <span class="closeBtn" @click="cancel">取消</span>
      <el-button class="minWid btn btn-outline-primary ml-3" @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script>
import addEdit from './addEdit';
import Sortable from 'sortablejs';

import { getAllTables } from '@/api/adminPage/sysAutoCode';
import { getDictList } from '@/api/adminPage/baseConfig/listValue';

export default {
  name: 'autoCode',
  props: {
    from: {
      type: Object,
      require: true,
      default: () => {}
    },
    formData: {
      type: Object,
      require: true
    }
  },

  data() {
    return {
      rules: {
        controlType: [{ type: 'string', required: true, message: '控件类型必填', trigger: 'change' }],
        input: { type: 'string', required: true, message: '必填字段', trigger: 'change' },
        supplier: { type: 'string', required: true, message: '必填字段', trigger: 'change' },
        goodstatus: { type: 'string', required: true, message: '必填字段', trigger: 'change' },
        'producedate.start': { type: 'string', required: true, message: '必填字段', trigger: 'change' },
        'expireddate.start': { type: 'string', required: true, message: '必填字段', trigger: 'change' }
      },
      dictList: []
    };
  },
  mounted() {
    // 阻止默认行为
    document.body.ondrop = function(event) {
      event.preventDefault();
      event.stopPropagation();
    };
    this.rowDrop();
  },
  created() {
     this.getDictList();
  },
  methods: {
    getDictList() {
      getDictList().then(res => {
        this.dictList = res.result;
      });
    },
    cancel() {
      //初始化一些属性
      this.$emit('cancel');
    },
    last() {
      this.$emit('last');
    },
    next() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.$emit('next', this.formData);
        }
      });
    },
    rowDrop() {
      const tbody = document.querySelectorAll('.sort-table > .el-table__body-wrapper > table > tbody')[0];
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.formData.sysAutocodeItems.splice(oldIndex, 1)[0];
          _this.formData.sysAutocodeItems.splice(newIndex, 0, currRow);
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input.is-disabled .el-input__inner,
::v-deep .el-textarea.is-disabled .el-input__inner {
  background-color: #eff2f7 !important;
  border: 1px solid #ced4da !important;
  color: #74788d !important;
  padding: 0 12px !important;
  &::-webkit-input-placeholder {
    color: #74788d !important;
  }
}
.forms {
  max-height: calc(100vh - 360px);
  margin-top: 1.875rem;
}
.mg-top20 {
  margin-top: 25px;
  margin-bottom: 35px;
}

::v-deep .el-form-item__label {
  font-size: 13px;
  color: #495057;
  font-weight: 500;
  line-height: 32px;
  padding: 0 12px 0 0;
  margin: 0;
  text-align: right;
  float: left;
}

::v-deep .dialog-footer {
  border-top: 1px solid #eff2f7 !important;
  padding: 16px !important;
  margin-top: 16px;
}
.minWid {
  min-width: 108px;
}
.forms {
  padding-right: 0;
  max-height: calc(100vh - 360px);
}
.beforeBtn {
  float: left;
  line-height: 32px;
  color: #556de5;
  cursor: pointer;
}
.closeBtn {
  line-height: 32px;
  color: #73778d;
  cursor: pointer;
}
.title-h3 {
  font-weight: bold;
  span {
    padding-right: 10px;
    color: red;
  }
}

::v-deep .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label,
.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label {
  &:after {
    content: '';
    margin-left: 0px;
  }
  &:before {
    content: '*';
    color: #f46a6a;
    margin-right: 4px;
  }
}

::v-deep .el-form-item--small .el-form-item__content {
  float: right;
  line-height: 32px;
  width:90%;
}
::v-deep .el-form-item--small.el-form-item {
  margin-bottom: 0px;
}
::v-deep .el-form-item__label {
    font-size: 13px;
    color: #495057;
    font-weight: 500;
    line-height: 32px;
    padding: 0 0px 0 0;
    margin: 0;
    text-align: right;
    float: left;
}
</style>
